// https://f2.antv.vision/zh/examples/funnel/pyramid#stroke

import F2 from '@antv/f2';

const data = [
  { action: '浏览网站', pv: 50000, percent: 1 },
  { action: '放入购物车', pv: 35000, percent: 0.7 },
  { action: '生成订单', pv: 25000, percent: 0.5 },
  { action: '支付订单', pv: 15000, percent: 0.3 },
  { action: '完成交易', pv: 8000, percent: 0.16 },
];

const chart = new F2.Chart<typeof data[0]>({
  id: 'container',
  pixelRatio: window.devicePixelRatio,
  padding: [60, 80, 15, 15],
});

chart.source(data);
chart.axis(false);
chart.coord({
  transposed: true,
});
chart.legend(true);
chart.intervalLabel({
  offsetX: 10,
  label: (data, color) => {
    return {
      text: data.action,
      fill: color,
    };
  },
});

// 提示文案
data.forEach(function (obj) {
  chart.guide().text({
    position: [obj.action, 0.5],
    content: (obj.percent * 100).toFixed(0) + '%',
    style: {
      textBaseline: 'middle',
      textAlign: 'center',
      fill: '#fff',
    },
  });
});

chart
  .interval()
  .position(['action', 'percent'])
  .color('action', ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF'])
  .adjust('symmetric')
  .style({
    lineWidth: 2,
    stroke: '#fff',
  })
  .shape('pyramid');
chart.render();
